import React from 'react'
import { Table } from 'antd'
import './ResourcesTable.less'
import LineChart from './LineChart'

const ResourcesTable = () => {
	const renderContent = (value, row, index) => {
		return {
			children: value,
			props: {
				colSpan: 0,
			},
		}
	}

	const columns = [
		{
			title: '项目及人员信息',
			dataIndex: 'name',
			width: 160,
		},
		{
			title: '2020-08-31',
			children: [
				{
					title: '一',
					dataIndex: 'monday1',
					render: (value, row, index) => {
						return {
							children: <LineChart id={`${row.id}${index}monday1`} />,
							props: {
								colSpan: 7,
							},
						}
					},
				},
				{
					title: '二',
					dataIndex: 'tuesday1',
					render: renderContent,
				},
				{
					title: '三',
					dataIndex: 'wednesday1',
					render: renderContent,
				},
				{
					title: '四',
					dataIndex: 'thursday1',
					render: renderContent,
				},
				{
					title: '五',
					dataIndex: 'friday1',
					render: renderContent,
				},
				{
					title: '六',
					dataIndex: 'saturday1',
					render: renderContent,
				},
				{
					title: '日',
					dataIndex: 'sunday1',
					render: renderContent,
				},
			],
		},
		{
			title: '2020-09-07',
			children: [
				{
					title: '一',
					dataIndex: 'monday2',
					render: (value, row, index) => {
						return {
							children: <LineChart id={`${row.id}${index}monday2`} />,
							props: {
								colSpan: 7,
							},
						}
					},
				},
				{
					title: '二',
					dataIndex: 'tuesday2',
					render: renderContent,
				},
				{
					title: '三',
					dataIndex: 'wednesday2',
					render: renderContent,
				},
				{
					title: '四',
					dataIndex: 'thursday2',
					render: renderContent,
				},
				{
					title: '五',
					dataIndex: 'friday2',
					render: renderContent,
				},
				{
					title: '六',
					dataIndex: 'saturday2',
					render: renderContent,
				},
				{
					title: '日',
					dataIndex: 'sunday2',
					render: renderContent,
				},
			],
		},
		{
			title: '2020-09-14',
			children: [
				{
					title: '一',
					dataIndex: 'monday3',
					render: (value, row, index) => {
						return {
							children: <LineChart id={`${row.id}${index}monday3`} />,
							props: {
								colSpan: 7,
							},
						}
					},
				},
				{
					title: '二',
					dataIndex: 'tuesday3',
					render: renderContent,
				},
				{
					title: '三',
					dataIndex: 'wednesday3',
					render: renderContent,
				},
				{
					title: '四',
					dataIndex: 'thursday3',
					render: renderContent,
				},
				{
					title: '五',
					dataIndex: 'friday3',
					render: renderContent,
				},
				{
					title: '六',
					dataIndex: 'saturday3',
					render: renderContent,
				},
				{
					title: '日',
					dataIndex: 'sunday3',
					render: renderContent,
				},
			],
		},
		{
			title: '2020-09-21',
			children: [
				{
					title: '一',
					dataIndex: 'monday4',
					render: (value, row, index) => {
						return {
							children: <LineChart id={`${row.id}${index}monday4`} />,
							props: {
								colSpan: 7,
							},
						}
					},
				},
				{
					title: '二',
					dataIndex: 'tuesday4',
					render: renderContent,
				},
				{
					title: '三',
					dataIndex: 'wednesday4',
					render: renderContent,
				},
				{
					title: '四',
					dataIndex: 'thursday4',
					render: renderContent,
				},
				{
					title: '五',
					dataIndex: 'friday4',
					render: renderContent,
				},
				{
					title: '六',
					dataIndex: 'saturday4',
					render: renderContent,
				},
				{
					title: '日',
					dataIndex: 'sunday4',
					render: renderContent,
				},
			],
		},
	]

	const dataSource = [
		{
			name: 'teamworkV3.3.1 2020-07-01~2020-10-13',
			id: 1,
			child: [
				{
					name: '张三',
					monday1: 1,
					tuesday1: 2,
					wednesday1: 3,
					thursday1: 4,
					friday1: 5,
					saturday1: 6,
					sunday1: 7,

					monday2: 1,
					tuesday2: 2,
					wednesday2: 3,
					thursday2: 4,
					friday2: 5,
					saturday2: 6,
					sunday2: 7,

					monday3: 1,
					tuesday3: 2,
					wednesday3: 3,
					thursday3: 4,
					friday3: 5,
					saturday3: 6,
					sunday3: 7,

					monday4: 1,
					tuesday4: 2,
					wednesday4: 3,
					thursday4: 4,
					friday4: 5,
					saturday4: 6,
					sunday4: 7,
				},
				{
					name: '李四',
					monday1: 1,
					tuesday1: 2,
					wednesday1: 3,
					thursday1: 4,
					friday1: 5,
					saturday1: 6,
					sunday1: 7,

					monday2: 1,
					tuesday2: 2,
					wednesday2: 3,
					thursday2: 4,
					friday2: 5,
					saturday2: 6,
					sunday2: 7,

					monday3: 1,
					tuesday3: 2,
					wednesday3: 3,
					thursday3: 4,
					friday3: 5,
					saturday3: 6,
					sunday3: 7,

					monday4: 1,
					tuesday4: 2,
					wednesday4: 3,
					thursday4: 4,
					friday4: 5,
					saturday4: 6,
					sunday4: 7,
				},
				{
					name: '李四',
					monday1: 1,
					tuesday1: 2,
					wednesday1: 3,
					thursday1: 4,
					friday1: 5,
					saturday1: 6,
					sunday1: 7,

					monday2: 1,
					tuesday2: 2,
					wednesday2: 3,
					thursday2: 4,
					friday2: 5,
					saturday2: 6,
					sunday2: 7,

					monday3: 1,
					tuesday3: 2,
					wednesday3: 3,
					thursday3: 4,
					friday3: 5,
					saturday3: 6,
					sunday3: 7,

					monday4: 1,
					tuesday4: 2,
					wednesday4: 3,
					thursday4: 4,
					friday4: 5,
					saturday4: 6,
					sunday4: 7,
				},
			],
		},
		{
			name: '独立任务集合',
			id: 2,
			child: [
				{
					name: '张三1',
					monday1: 1,
					tuesday1: 2,
					wednesday1: 3,
					thursday1: 4,
					friday1: 5,
					saturday1: 6,
					sunday1: 7,

					monday2: 1,
					tuesday2: 2,
					wednesday2: 3,
					thursday2: 4,
					friday2: 5,
					saturday2: 6,
					sunday2: 7,

					monday3: 1,
					tuesday3: 2,
					wednesday3: 3,
					thursday3: 4,
					friday3: 5,
					saturday3: 6,
					sunday3: 7,

					monday4: 1,
					tuesday4: 2,
					wednesday4: 3,
					thursday4: 4,
					friday4: 5,
					saturday4: 6,
					sunday4: 7,
				},
				{
					name: '李四1',
					monday1: 1,
					tuesday1: 2,
					wednesday1: 3,
					thursday1: 4,
					friday1: 5,
					saturday1: 6,
					sunday1: 7,

					monday2: 1,
					tuesday2: 2,
					wednesday2: 3,
					thursday2: 4,
					friday2: 5,
					saturday2: 6,
					sunday2: 7,

					monday3: 1,
					tuesday3: 2,
					wednesday3: 3,
					thursday3: 4,
					friday3: 5,
					saturday3: 6,
					sunday3: 7,

					monday4: 1,
					tuesday4: 2,
					wednesday4: 3,
					thursday4: 4,
					friday4: 5,
					saturday4: 6,
					sunday4: 7,
				},
				{
					name: '李四1',
					monday1: 1,
					tuesday1: 2,
					wednesday1: 3,
					thursday1: 4,
					friday1: 5,
					saturday1: 6,
					sunday1: 7,

					monday2: 1,
					tuesday2: 2,
					wednesday2: 3,
					thursday2: 4,
					friday2: 5,
					saturday2: 6,
					sunday2: 7,

					monday3: 1,
					tuesday3: 2,
					wednesday3: 3,
					thursday3: 4,
					friday3: 5,
					saturday3: 6,
					sunday3: 7,

					monday4: 1,
					tuesday4: 2,
					wednesday4: 3,
					thursday4: 4,
					friday4: 5,
					saturday4: 6,
					sunday4: 7,
				},
			],
		},
		{
			name: '独立任务集合2',
			id: 3,
			child: [
				{
					name: '张三2',
					monday1: 1,
					tuesday1: 2,
					wednesday1: 3,
					thursday1: 4,
					friday1: 5,
					saturday1: 6,
					sunday1: 7,

					monday2: 1,
					tuesday2: 2,
					wednesday2: 3,
					thursday2: 4,
					friday2: 5,
					saturday2: 6,
					sunday2: 7,

					monday3: 1,
					tuesday3: 2,
					wednesday3: 3,
					thursday3: 4,
					friday3: 5,
					saturday3: 6,
					sunday3: 7,

					monday4: 1,
					tuesday4: 2,
					wednesday4: 3,
					thursday4: 4,
					friday4: 5,
					saturday4: 6,
					sunday4: 7,
				},
				{
					name: '李四2',
					monday1: 1,
					tuesday1: 2,
					wednesday1: 3,
					thursday1: 4,
					friday1: 5,
					saturday1: 6,
					sunday1: 7,

					monday2: 1,
					tuesday2: 2,
					wednesday2: 3,
					thursday2: 4,
					friday2: 5,
					saturday2: 6,
					sunday2: 7,

					monday3: 1,
					tuesday3: 2,
					wednesday3: 3,
					thursday3: 4,
					friday3: 5,
					saturday3: 6,
					sunday3: 7,

					monday4: 1,
					tuesday4: 2,
					wednesday4: 3,
					thursday4: 4,
					friday4: 5,
					saturday4: 6,
					sunday4: 7,
				},
				{
					name: '李四2',
					monday1: 1,
					tuesday1: 2,
					wednesday1: 3,
					thursday1: 4,
					friday1: 5,
					saturday1: 6,
					sunday1: 7,

					monday2: 1,
					tuesday2: 2,
					wednesday2: 3,
					thursday2: 4,
					friday2: 5,
					saturday2: 6,
					sunday2: 7,

					monday3: 1,
					tuesday3: 2,
					wednesday3: 3,
					thursday3: 4,
					friday3: 5,
					saturday3: 6,
					sunday3: 7,

					monday4: 1,
					tuesday4: 2,
					wednesday4: 3,
					thursday4: 4,
					friday4: 5,
					saturday4: 6,
					sunday4: 7,
				},
			],
		},
	]

	const expandedRowRender = (record, index) => {
		const childColumns = [
			{
				title: '项目及人员信息',
				dataIndex: 'name',
				width: 160,
			},
			{
				title: '2020-08-31',
				children: [
					{
						title: '一',
						dataIndex: 'monday1',
					},
					{
						title: '二',
						dataIndex: 'tuesday1',
					},
					{
						title: '三',
						dataIndex: 'wednesday1',
					},
					{
						title: '四',
						dataIndex: 'thursday1',
					},
					{
						title: '五',
						dataIndex: 'friday1',
					},
					{
						title: '六',
						dataIndex: 'saturday1',
					},
					{
						title: '日',
						dataIndex: 'sunday1',
					},
				],
			},
			{
				title: '2020-09-07',
				children: [
					{
						title: '一',
						dataIndex: 'monday2',
					},
					{
						title: '二',
						dataIndex: 'tuesday2',
					},
					{
						title: '三',
						dataIndex: 'wednesday2',
					},
					{
						title: '四',
						dataIndex: 'thursday2',
					},
					{
						title: '五',
						dataIndex: 'friday2',
					},
					{
						title: '六',
						dataIndex: 'saturday2',
					},
					{
						title: '日',
						dataIndex: 'sunday2',
					},
				],
			},
			{
				title: '2020-09-14',
				children: [
					{
						title: '一',
						dataIndex: 'monday3',
					},
					{
						title: '二',
						dataIndex: 'tuesday3',
					},
					{
						title: '三',
						dataIndex: 'wednesday3',
					},
					{
						title: '四',
						dataIndex: 'thursday3',
					},
					{
						title: '五',
						dataIndex: 'friday3',
					},
					{
						title: '六',
						dataIndex: 'saturday3',
					},
					{
						title: '日',
						dataIndex: 'sunday3',
					},
				],
			},
			{
				title: '2020-09-21',
				children: [
					{
						title: '一',
						dataIndex: 'monday4',
					},
					{
						title: '二',
						dataIndex: 'tuesday4',
					},
					{
						title: '三',
						dataIndex: 'wednesday4',
					},
					{
						title: '四',
						dataIndex: 'thursday4',
					},
					{
						title: '五',
						dataIndex: 'friday4',
					},
					{
						title: '六',
						dataIndex: 'saturday4',
					},
					{
						title: '日',
						dataIndex: 'sunday4',
					},
				],
			},
		]

		const childData = dataSource[index].child
		return (
			<Table
				columns={childColumns}
				dataSource={childData}
				showHeader={false}
				bordered={true}
				pagination={false}
				rowKey={(i, t) => t}
			/>
		)
	}

	return (
		<div className={'resourceTableBox'}>
			<Table
				columns={columns}
				dataSource={dataSource}
				expandedRowRender={expandedRowRender}
				bordered={true}
				rowKey={(i, t) => t}
			/>
		</div>
	)
}

export default ResourcesTable
